<template>
  <div class="regularVerify">
    <!-- {{regList}} -->
    <el-form label-width="90px" size="small">
      <div class="contentBox" v-for="(item, index) in regList" :key="index">
        <el-form-item>
          <div slot="label">
            <span class="mr-5">正则</span>
            <el-tooltip class="item" effect="dark" content="合法的正则表达式，才能进行校验！" placement="top">
              <i class="el-icon-warning" style="color: #e6a23c"></i>
            </el-tooltip>
          </div>
          <el-input v-model="item.reg" placeholder="请输入正则" clearable @change="valueChange($event, regList)"></el-input>
          <!-- <div class="flex">
            <div class="flex1">
              <el-input v-model="item.reg" placeholder="请输入正则" clearable @change="regChange(item)"></el-input>
            </div>
            <div class="ml-5">
              <el-popover placement="top" width="400" trigger="click">
                <el-input type="textarea" v-model="verfiyText" :rows="5"></el-input>
                <el-button type="primary" plain size="mini" class="verfiyBtn" @click="verfiyClick(item)">验证</el-button>
                <el-button slot="reference" type="primary" plain>测试</el-button>
              </el-popover>
            </div>
          </div> -->
        </el-form-item>
        <el-form-item label="错误提示">
          <el-input v-model="item.msg" placeholder="请输入错误提示" @change="valueChange($event, regList)" clearable></el-input>
        </el-form-item>
        <span class="closeBtn" @click="delBtn(index)"><i class="el-icon-close"></i></span>
      </div>
    </el-form>

  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
export default {
  name: 'regularVerify',
  data() {
    return {
      verfiyText: '',
      regList: []
    }
  },
  computed: {
    ...mapState('pageData', ['activeFormData']),
    activeRegList() {
      return this.activeFormData?.regList
    }
  },
  watch: {
    activeRegList: {
      handler(val) {
        this.regList = val
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    ...mapMutations('pageData', ['DELREGULAR', 'SETPROP']),
    delBtn(index) {
      this.DELREGULAR(index)
    },

    valueChange(value, key) {
      this.SETPROP({
        value: this.regList,
        key
      })
    },
    // regChange(item) {
    //   console.log(item, '===item===')
    // },

    // 验证正则是否正确
    verfiyClick(item) {
      const {reg} = item
      // console.log(item)
      const isPass = eval(reg).test(this.verfiyText)
      this.$message({
        type: isPass ? 'success' : 'error',
        message: isPass ? '校验成功' : '校验失败'
      })
      if (isPass) { // 校验成功
        if (!JSON.stringify(this.regList).includes(JSON.stringify(item))) {
          this.regList.push(item)
        }
        this.SETPROP({
          value: this.regList,
          key: 'regList'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.regularVerify {
  margin: 6px 0;
  .contentBox {
    padding: 12px 6px;
    background: #f8f8f8;
    position: relative;
    border-radius: 4px;
    margin-bottom: 10px;
    .closeBtn {
      position: absolute;
      right: -6px;
      top: -6px;
      display: block;
      width: 16px;
      height: 16px;
      line-height: 16px;
      background: rgba(0, 0, 0, 0.2);
      border-radius: 50%;
      color: #fff;
      text-align: center;
      z-index: 1;
      cursor: pointer;
      font-size: 12px;
      &:hover {
        background: red;
      }
    }
  }
}
.verfiyBtn {
  margin-top: 10px;
}
</style>